<template>
  <div class="loginWrapper">
    <login-top></login-top>
    <div class="loginTopSelect">
      <tab active-color='#f19600' :line-width=2>
        <tab-item selected @on-item-click="handler(1)">验证码登录</tab-item>
        <tab-item @on-item-click="handler(2)">密码登录</tab-item>
      </tab>
    </div>
    <login-main ref="loginMain" v-on:message="receiverMsg" :pwd-show-status="pwdShowStatus"></login-main>
    <code-login-main ref="codeLoginMain" v-on:showaddress="receiverAddress" v-on:message="receiverCodeMsg" :code-show-status="!pwdShowStatus"></code-login-main>
    <box class="login-bottom-wrapper">
      <x-button type="warn" @click="login">登录</x-button>
    </box>
    <div class="login-bottom-op" v-show="pwdShowStatus">
      <div class="left"><p><span @click="toRegister">免费注册</span></p></div>
      <div class="right"><p><span @click="toForgetPwd">忘记密码</span></p></div>
    </div>

    <div class="selectAddress" v-if="showSelectAddress">

      <div class="shadow">
      </div>
      <div class="box">
        <div class="selectCity">
          <picker :data='citys' :value.sync='selectedCity' @on-change='change3'></picker>
        </div>

        <div class="confirmBtn" @click="confirmAddress">
          确定
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import LoginTop from './../components/login/loginTop.vue'
  import LoginMain from './../components/login/loginMain.vue'
  import CodeLoginMain from './../components/login/codeLoginMain.vue'
  import { Popup, PopupPicker, XButton, Box, Toast, Tab, TabItem, Group, Picker } from './../../components'
  import { showBigGift, selectAddressStatus, bigGifts,QRCodeId } from './../../vuex/getters.js'
  import { set_showBigGift, set_selectAddressStatus, set_bigGift } from './../../vuex/actions.js'
  var LocalStorageUtil = require('./../../commons/js/LocalStorageUtil.js')
  var MyRequest = require('./../../commons/js/MyRequest.js')
  var Global = require("./../../commons/js/Global.js")
  var sign = require("./../../commons/js/sign.js")


  let years = []
  for (var i = 2000; i <= 2003; i++) {
    years.push({
      name: i + '年',
      value: i + ''
    })
  }

  export default {
    components: {
      LoginTop,
      LoginMain,
      CodeLoginMain,
      XButton,
      Box,
      Toast,
      Tab,
      TabItem,
      Popup,
      PopupPicker,
      Group,
      Picker
    },
    data () {
      return {
        phone: "",
        pwd: "",
        code: "",
        pwdShowStatus: false,
        showSelectAddress: false,
        citys: [],
        selectedCity: [],
        cityId: '',
        isNewUser: false
      }
    },
    vuex: {
      getters: {
        showBigGift,
        selectAddressStatus,
        bigGifts,
        QRCodeId
      },
      actions: {
        set_showBigGift,
        set_selectAddressStatus,
        set_bigGift
      }
    },
    created: function() {
      Global.closeLoading()
    },
    methods: {
      change3 (value) {
        this.cityId = value[0]
        console.log(value)
      },
      confirmAddress () {
        console.log(this.cityId)
        this.showSelectAddress = false
      },
      handler (index) {
        if(index == 1) {
          this.pwdShowStatus = false
        } else {
          this.pwdShowStatus = true
        }
      },
      login () {
        if(this.pwdShowStatus) {
          this.loginByPwd ()
        } else {
          this.loginByCode ()
        }
      },
      loginByPwd () {
        if(this.phone && this.pwd) {
          var data = {
            action: "login",
            mobile: this.phone,
            password: this.pwd
          }
          MyRequest.MyGetWithToast("Login", this, function (result, that) {
            Global.closeLoading()
            if (result.success) {
              LocalStorageUtil.setItem("User", result.data)
              LocalStorageUtil.setItem("userSign", result.data.userSign)
              //that.$router.replace({ path: '/' })
              history.go(-1)
            } else {
              Global.showToast(result.msg, that)
            }
          }, data)
        } else {
          Global.showToast("信息不完整，请检查一下", this)
        }
      },
      loginByCode () {
        if(this.phone && this.code) {
          var data = {
            action: "quickMobileLogin",
            mobile: this.phone,
            code: this.code
          }
          if(this.isNewUser) {
            data.cityId = this.cityId
            data.platform = Global.getPlatform()
            data.appVersion = Global.getVersion()
            if (this.QRCodeId != "no") {
              var QRData = {
                QRCodeId: this.QRCodeId,
                userPhone: this.phone
              }
              MyRequest.MyGet("QRCodeId", this, function (result, that) {
              }, QRData);
            }
          }
          data.sign = sign.getSign(data)
          MyRequest.MyGetWithToast("quickMobileLogin", this, function (result, that) {
            if (result.success) {
              LocalStorageUtil.setItem("User", result.data)
              LocalStorageUtil.setItem("userSign", result.data.userSign)
              //that.$router.replace({ path: '/' })
              if(result.msg == '注册成功') {
                that.getBigGift(that)
                return
              }
              history.go(-1)
            } else {
              Global.closeLoading()
              Global.showToast(result.msg, that)
            }
          }, data)
        } else {
          Global.showToast("信息不完整，请检查一下", this)
        }
      },
     getBigGift (that) {
        var data = {
          mobile : LocalStorageUtil.getItem("User").mobile
        }
        MyRequest.MyGetWithToast("BigGift", that, function (result, self) {
          if(result.success) {
            var mobile = LocalStorageUtil.getItem("User").mobile
            mobile = mobile.substring(mobile.length - 4, mobile.length)
            var curGifts = []
            for(var i = 0; i < result.data.length; i ++) {
              var item = result.data[i]
              //console.log(item.bettwenTime)
              //item.activeTime = (item.bettwenTime.split("~"))[1]
              item.lastMobile = mobile
              curGifts.push(item)
            }
            self.set_showBigGift(1)
            self.set_bigGift( curGifts )
            Global.closeLoading();
            self.$router.replace({ path: '/' })
          } else {
            self.set_showBigGift(0)
          }
        }, data)
      },
      toRegister () {
        //var city = LocalStorageUtil.getItem('City')
        //if(city) {
        //  this.$router.go({ path: '/register' })
        //} else {
          this.$router.go({ path: '/selectAddress' })
        //}
      },
      toForgetPwd () {
        this.$router.go({ path: '/forgetPwd' })
      },
      receiverMsg (text) {
        this.phone = text.phone;
        this.pwd = text.pwd;
      },
      receiverCodeMsg (text) {
        this.phone = text.phone
        this.code = text.code
      },
      receiverAddress (text) {
        this.showSelectAddress = text.showSelectAddress
        this.citys = text.citys
        this.selectedCity = text.selectedCity
        this.isNewUser = text.isNewUser
        this.cityId = text.selectedCity[0]
      }
    }
  }
</script>
<style>
  .loginWrapper .loginTopSelect {
    padding: 0 1rem;
  }
  .loginWrapper .login-bottom-wrapper {
    padding: 2rem 1rem 1rem 1rem;
  }
  .loginWrapper .login-bottom-op {
    display: flex;
    font-size: 1.4rem;
    font-family: "微软雅黑";
    padding: 0 1rem;
  }
  .loginWrapper .login-bottom-op .left {
    text-align: left;
    flex: 1;
  }
  .loginWrapper .login-bottom-op .right {
    flex: 1;
    text-align: right;
  }
  .weui_toast {
    top: auto;
    bottom: 2rem;
    font-size: 1.4rem;
  }
  .weui_toast_text .weui_toast_content {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .loginWrapper .vux-tab .vux-tab-item {
    font-size: 1.4rem;
    font-family: "微软雅黑";
  }
  .loginWrapper .selectAddress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .loginWrapper .selectAddress .shadow {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4)
  }
  .loginWrapper .selectAddress .selectCity {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 5.5rem;
    z-index: 999;
  }
  .loginWrapper .selectAddress .box {
    width: 100%;
    height: 30rem;
    background: #f7f7f7;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .loginWrapper .selectAddress .confirmBtn {
    padding: .5rem 0;
    width: 100%;
    height: 3.5rem;
    text-align: center;
    font-size: 1.4rem;
    font-family: "微软雅黑";
    line-height: 3.5rem;
    background: #fff;
    position: absolute;
    bottom: 0rem;
    z-index: 999;
  }

  .loginWrapper .selectAddress .scroller-item {
    font-size: 1.4rem;
    height: 3.5rem;
    line-height: 3.5rem;
    font-family: "微软雅黑";
  }
  .loginWrapper .selectAddress .scroller-indicator {
    font-size: 1.4rem;
    height: 3.5rem;
    line-height: 3.5rem;
    top: 10.5rem;
    background: #f7f7f7;
    z-index: 1;
  }
  .loginWrapper .selectAddress .scroller-component {
    height: 24.5rem;
    background: #fff;
  }
  .loginWrapper .selectAddress .scroller-content {
    z-index: 2;
  }
</style>
